/*
//VIEW PORT
//
//|____xs____|320px|____sm____|500px|____md____|970px|____lg____|1370px|____xl____|2000px|____xxl____|infinity
//

/*本项目只有两段viewport切分，于992px*/
/* 做成css变量引用的方式是不行的*/

$phone_max: 792px
$phone_min: 793px
//laptop is 793px ~ 1399px
$desktop_max: 1279px
$desktop_min: 1280px
//desktop is 1401px ~

// ↑ DYNAMIC REFERENCE ↑:
// src\pages\admin\admin.vue\handleMenuResize()
//
//
//
//
//
//
//

#app
    //使用方法：1.单项：d-xxx-only 2.白名单：d-none d-xxx d-xxx  3.黑名单：d-xxx-none
    .d-none
        display: none

    @media (min-width: $desktop_min)
        //.d-desktop, .d-desktop-only
        //    display: unset
        .d-desktop-none
            display: none
        .d-phone-only, .d-laptop-only
            display: none
        //////////////////////
        //.d-desktop-important, .d-desktop-only-important
        //    display: unset!important
        .d-desktop-none-important
            display: none!important
        .d-phone-only-important, .d-laptop-only-important
            display: none!important
    @media (min-width: $phone_min) and (max-width: $desktop_max)
        //.d-laptop, .d-laptop-only
        //    display: unset
        .d-laptop-none
            display: none
        .d-phone-only, .d-desktop-only
            display: none
        //////////////////////
        //.d-laptop-important, .d-laptop-only-important
        //    display: unset!important
        .d-laptop-none-important
            display: none!important
        .d-phone-only-important, .d-desktop-only-important
            display: none!important
    @media (max-width: $phone_max)
        //.d-phone, .d-phone-only
        //    display: unset
        .d-phone-none
            display: none
        .d-laptop-only, .d-desktop-only
            display: none
        //////////////////////
        //.d-phone-important, .d-phone-only-important
        //    display: unset!important
        .d-phone-none-important
            display: none!important
        .d-laptop-only-important, .d-desktop-only-important
            display: none!important
/////////////////////////////////////////////////////

/////////////////////////////////////////////
#App_silverDragon
    .sv-w-mobile-80w
        @media (max-width: $phone_max)
            width: 80% !important

    .sv-w-mobile-90w
        @media (max-width: $phone_max)
            max-width: 90% !important

    :deep(.sv-w-mobile-90w)
        @media (max-width: $phone_max)
            max-width: 90% !important
